<template>
  <div class="app-container">
    <Fullcalendar
      ref="fullcalendar"
      height="100%"
      :header-toolbar="headerToolbar"
      @addEvent="handleAddEvent"
      @eventClick="handleEventClick"
      @dateClick="handleDateClick"
      @dateSelect="handleDateSelect"
      @changeTime="handleChangeTime"
      @getLunar="getLunar"
      @getCalendarApi="getCalendarApi" />
  </div>
</template>
<script>
export default {
  components: { },
  data() {
    return {
      headerToolbar: {
        end: 'addEvent customPrev,today,customNext'
      },
      monthData: [{
        id: 1,
        title: '事件1', // 事件内容
        start: '2024-08-25', // 事件开始时间
        end: '2024-08-25', // 事件结束时间
        cssClass: 'red' // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
      }, {
        id: 2,
        title: '事件2', // 事件内容
        start: '2024-08-25', // 事件开始时间
        end: '2024-08-25', // 事件结束时间
        cssClass: 'red' // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
      }, {
        id: 3,
        title: '劳动节',
        start: '2024-05-01',
        end: '2024-05-05',
        cssClass: 'blue'
      }],
      lunar: null
    }
  },
  methods: {
    handleAddEvent() {
      this.$refs.fullcalendar.addEvent({
        id: this.T.uuid(),
        title: 'event 2',
        date: new Date(),
        display: 'list-item',
        textColor: 'red',
        borderColor: '#f00'
      })
    },
    handleDateClick(arg) {
      console.log('handleDateClick', arg)
      var solar = this.lunar.Solar.fromDate(new Date(arg.date))
      var lunar = solar.getLunar()
      const h = this.$createElement
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('p', null, solar.toFullString()),
          h('p', null, solar.getFestivals()),
          h('p', null, solar.getOtherFestivals()),
          h('p', null, lunar.getFestivals()),
          h('p', null, lunar.getOtherFestivals()),
          h('p', null, lunar.toFullString())
        ]),
        confirmButtonText: '确定',
        beforeClose: (action, instance, done) => {
          done()
        }
      }).then(action => {
      })
    },
    handleDateSelect(arg) {
      console.log('handleDateSelect', arg)
    },
    handleEventClick(arg) {
      console.log('handleEventClick', arg)
    },
    handleChangeTime(arg) {
      console.log('handleChangeTime', arg)
      this.$refs.fullcalendar.addEvent({
        id: this.T.uuid(),
        title: 'event 2',
        date: new Date(arg.date),
        display: 'list-item',
        textColor: 'red',
        borderColor: '#f00'
      })
    },
    getLunar(lunar) {
      this.lunar = lunar
    },
    getCalendarApi(api) {
      this.$refs.fullcalendar.updateOptions({
        locale: 'zh-CN'
      })
    }
  }
}

</script>
<style lang="scss" scoped>
</style>
